| Etiqueta | Descripción |
|---|---|
| <!DOCTYPE> | Define el tipo de documento y la versión de HTML. |
| <html> </html> | Define la raíz de un documento HTML. |
| <head> </head> | Contiene metadatos/información sobre el documento. |
| <title> </title> | Especifica el título del documento. |
| <meta> </meta> | Define metadatos como la codificación de caracteres (charset), autor, descripción, etc. |
| <link> </link> | Enlaza archivos externos, como hojas de estilo CSS. |
| <style> </style> | Contiene CSS interno para el documento. |
| <body> </body> | Contiene el contenido del documento. |
| <header> </header> | Define un encabezado para el documento o una sección. |
| <nav> </nav> | Define una sección que contiene enlaces de navegación. |
| <main> </main> | Indica el contenido principal del documento. |
| <section> </section> | Define una sección genérica en el documento. |
| <article> </article> | Representa un contenido independiente que puede ser distribuido por separado. |
| <aside> </aside> | Contiene información adicional, como barras laterales o cuadros de información relacionada. |
| <footer> </footer> | Define el pie de página del documento o una sección. |
| <div> </div> | Un contenedor genérico sin significado semántico específico. |
| <h1> a <h6> | Etiquetas de encabezado que indican la importancia de los títulos y subtítulos. |
| <p> </p> | Define un párrafo de texto. |
| <ul> </ul> | Define una lista no ordenada. |
| <ol> </ol> | Define una lista ordenada. |
| <li> </li> | Define un elemento de lista. |
| <a> </a> | Define un hipervínculo. |
| <img> | Inserta una imagen. |
| <table> </table> | Estructura una tabla. |
| <tr> </tr> | Define una fila en una tabla. |
| <th> </th> | Define una celda de encabezado en una tabla. |
| <td> </td> | Define una celda de datos en una tabla. |
| <form> </form> | Contiene un formulario para la entrada de datos del usuario. |
Conocer las etiquetas de estructura en HTML es fundamental para crear documentos web organizados y accesibles. Estas etiquetas permiten definir el contenido y su jerarquía, lo que facilita tanto la lectura por parte de los navegadores como la comprensión por parte de los desarrolladores y usuarios.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ejemplo de un documento HTML utilizando varias etiquetas estructurales.">
<meta name="author" content="Tu Nombre">
<title>Ejemplo Completo de HTML</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header,
nav,
footer {
background-color: #fd6703;
color: rgb(248, 252, 250);
text-align: center;
padding: 10px 0;
}
nav ul {
list-style-type: none;
padding: 0;
color: aqua;
}
nav ul li {
display: inline;
margin: 0 15px;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
aside {
background-color: #f4f4f4;
padding: 10px;
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body>
<header>
<h1>Bienvenido a Mi Página Web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre mí</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<section>
<h2>Introducción</h2>
<p>Este es un ejemplo de un documento HTML que incluye una variedad de etiquetas estructurales para
organizar el contenido de manera semántica.</p>
</section>
<section>
<h2>Contenido Principal</h2>
<article>
<h3>Artículo 1</h3>
<p>Este es el contenido de un artículo independiente que podría distribuirse de forma individual.</p>
</article>
<article>
<h3>Artículo 2</h3>
<p>Otro artículo con contenido propio. Cada artículo es una sección autónoma.</p>
</article>
</section>
<aside>
<h3>Información Adicional</h3>
<p>Este es un espacio para contenido complementario, como enlaces relacionados o anuncios.</p>
</aside>
<section>
<h2>Datos en Tablas</h2>
<table>
<caption>Ejemplo de Tabla</caption>
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
<tr>
<td>Dato A</td>
<td>Dato B</td>
<td>Dato C</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>© 2024 Tu Nombre. Todos los derechos reservados.</p>
</footer>
</body>
</html>